<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏库</title>
    <script src="./img/font/iconfont.js"></script>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./swiper-7.2.0/swiper/swiper-bundle.min.css">
    <style>
        .header{
            border-bottom: 1px solid #eee;
        }
        .first{
            display: none;
        }
        .show1{
            display: block;
        }
        .mySwiper .swiper-slide img{
            width: 100%;
            height: 20vw;
        }
        .mySwiper .swiper-pagination .swiper-pagination-bullet{
            background-color: #fff;
            margin-bottom: -8px;
            width: 2.5vw;
            height: 0.7vw;
            border-radius: 25%;
        }
        .tuBiao{
            flex-direction: column;
        }
        .dyh{
            display: flex;
        }
        .dyh>.stxw{
            width: 20%;
        }
        .dyh img{
            padding-left: 3.5vw;
            width: 65%;
        }
        .dyh .stxw p{
            font-size: 3vw;
            font-weight: bold;
            text-align: center;

        }
        .deh{
            margin-top: 4.5vw;
            display: flex;
            height: 10vw;
        }
        .deh>.zwyt{
            width: 25%;
            background-color: #eee;
            position: relative;
            margin-left: 2vw;
            margin-right: 2vw;
            border-radius: 5%;
            display: flex;
        }
        .deh>.zwyt .youWen{
            position: absolute;
            padding-left: 1vw;
            padding-top: 1vw;
        }
        .deh>.zwyt .youWen h6{
            font-weight: lighter;
            font-size: 1vw;
        }
        .deh>.zwyt .youWen p{
            font-weight: bold;
            font-size: 3vw;
        }
        .deh>.zwyt .youXia{  
            position: absolute;
            right: 1vw;
            top: 4vw;
        }
        .deh .youXia img{
            width: 25%;
            padding-left: 15vw;
        }
        .deh .p img{
            top: 10vw;
        }
        .nr{
            margin-top: 4vw;
            display: flex;
            flex-wrap: wrap;
        }
        .nr>.dyh{
            width: 100%;
            display: flex;
        }
        .nr>.dyh h3{
            width: 40vw;
            font-size: 4vw;
            margin-left: 2.5vw;
        }
        .nr>.dyh h5{
            width: 20vw;
            padding-top: 0.8vw;
            font-size: 3vw;
            margin-left: 58vw;
        }
        .nr>.stxw{
            width: 45%;
            margin-top: 2vw;
            margin-left: 2.5vw;
            margin-right: 2.5vw;
        }
        .nr img{
            width: 100%;
            border-radius: 5%;
        }
        .nr>.stxw>h5{
            margin-top: 1vw;
        }
        .nr>.stxw>.hang1{
            margin-top: 0.5vw;
            
        }
        .nr>.stxw>.hang1>.ybk{
            display: inline;
            font-size: 2vw;
            border: 1px solid #aaa;
            color: #aaa;
            padding: 0.1vw 0.2vw 0.1vw;
        }
        .nr>.stxw>.hang2{
            display: flex;
            margin-top: 1.5vw;
        }
        .nr>.stxw>.hang2>.zuo{
            background-color: #eee;
            font-weight: bold;
            font-size: 2.5vw;
        }
        .nr>.stxw>.hang2>.zhong{
            background-color: #eee;
            color: #aaa;
            text-decoration: line-through;
            font-size: 2vw;
            padding-top: 0.4vw;
        }
        .nr>.stxw>.hang2>.you{
            background-color: #000;
            color: #fff;
            font-weight: bold;
            font-size: 2vw;
            padding-top: 0.4vw;
        }
        .nr>.stxw>h5{
            font-size: 3vw;
        }
        .nr>.stxw>p{
            font-size: 2vw;
            margin-top: 0.5vw;
        }
        .nr img{
            width: 45vw;
            height: 25vw;
        }
    </style>
</head>
<body>
    <div class="FF">
        <div class="header">
            <div class="head zuo">
                <a>商城</a>
                <a class="dh">推荐</a>
                <a>榜单</a>
            </div>
            <div class="head you">
                <a href="./sousuo.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                </a>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youjian"></use>
                    </svg>
                </a>
            </div>
        </div>
        <div class="first">商城</div>
        <div class="first show1">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide"><img src="./img/IMG_2737(20211213-223645).JPG"></div>
                  <div class="swiper-slide"><img src="./img/IMG_2698.PNG"></div>
                  <div class="swiper-slide"><img src="./img/IMG_2702.PNG"></div>
                  <div class="swiper-slide"><img src="./img/IMG_2704.PNG"></div>
                  <div class="swiper-slide"><img src="./img/IMG_2704.PNG"></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="tuBiao">
                <div class="dyh">
                    <div class="stxw">
                        <img src="./img/IMG_2728(20211213-220120).PNG">
                        <p>黑盒商城</p>
                    </div>
                    <div class="stxw">
                        <img src="./img/IMG_2729(20211213-220346).PNG">
                        <p>饰品交易</p>
                    </div>
                    <div class="stxw">
                        <img src="./img/IMG_2730(20211213-220411).PNG">
                        <p>玩一玩</p>
                    </div>
                    <div class="stxw">
                        <img src="./img/IMG_2731(20211213-220448).PNG">
                        <p>卡带回收</p>
                    </div>
                    <div class="stxw">
                        <img src="./img/IMG_2732(20211213-220517).PNG">
                        <p>精选专辑</p>
                    </div>
                </div>
                <div class="deh">
                    <div class="zwyt">
                        <div class="youWen"><p>0元抽奖</p><h6>抽显示器</h6></div>
                        <div class="youXia p"><img src="./img/D94F7466D8B26DF237C952782E4145AB.png"></div>
                    </div>
                    <div class="zwyt">
                        <div class="youWen"><p>喜加一</p></div>
                        <div class="youXia"><img src="./img/DD254B14DC8ACE042FC828E23742EFFB.png"></div>
                    </div>
                    <div class="zwyt">
                        <div class="youWen"><p>领券中心</p></div>
                        <div class="youXia"><img src="./img/DBB15AFDD8C045F1327020F665F142C0.png"></div>
                    </div>
                    <div class="zwyt">
                        <div class="youWen"><p>专题活动</p></div>
                        <div class="youXia"><img src="./img/E710A63BBD39536B4AB7DECEB263D76D.png"></div>
                    </div>
                </div>
            </div>
            <div class="nr">
                <div class="dyh">
                    <h3>为您推荐</h3>
                    <h5>更多 ></h5>
                </div>
                <div class="stxw">
                    <img src="./img/z_cfx/zd1.jpg">
                    <h5>战地1</h5>
                    <div class="hang1">
                        <div class="ybk">大家都在玩</div>
                        <div class="ybk">第一人称</div>
                        <div class="ybk">一战</div>
                    </div>
                    <div class="hang2">
                        <div class="jg zuo">￥196</div>
                        <div class="jg zhong">￥198</div>
                        <div class="jg you">-2%</div>
                    </div>
                </div>
                <div class="stxw">
                    <img src="./img/z_cfx/gtfo.jpg">
                    <h5>GTFO</h5>
                    <div class="hang1">
                        <div class="ybk">steam促销</div>
                        <div class="ybk">在线合作</div>
                        <div class="ybk">合作</div>
                    </div>
                    <div class="hang2">
                        <div class="jg zuo">￥86</div>
                        <div class="jg zhong">￥116</div>
                        <div class="jg you">-28%</div>
                    </div>
                </div>
                <div class="stxw">
                    <img src="./img/z_cfx/wdsj.jpg">
                    <h5>我的世界：地下城</h5>
                    <div class="hang1">
                        <div class="ybk">我的关注</div>
                        <div class="ybk">冒险</div>
                        <div class="ybk">迷宫探索</div>
                    </div>
                    <div class="hang2">
                        <div class="jg zuo">￥142</div>
                        <div class="jg zhong">￥144</div>
                        <div class="jg you">-2%</div>
                    </div>
                </div>
                <div class="stxw">
                    <img src="./img/z_cfx/btmalyx.jpg">
                    <h5>半条命：Alyx</h5>
                    <div class="hang1">
                        <div class="ybk">我的关注</div>
                        <div class="ybk">VR</div>
                        <div class="ybk">虚拟现实</div>
                    </div>
                    <div class="hang2">
                        <div class="jg zuo">￥161</div>
                        <div class="jg zhong">￥163</div>
                        <div class="jg you">-2%</div>
                    </div>
                </div>
            </div>
            <div class="nr">
                <div class="dyh">
                    <h3>游戏专辑</h3>
                    <h5>更多 ></h5>
                </div>
                <div class="stxw">
                    <img src="./img/IMG_2691.PNG">
                    <h5>TGA2021参选游戏榜单</h5>
                    <p>40款游戏</p>
                    </div>
                <div class="stxw">
                    <img src="./img/z_cfx/tgatm.png">
                    <h5>TGA2021大奖专辑</h5>
                    <p>16款游戏</p>
                </div>
            </div>
            <div class="nr">
                <div class="dyh">
                    <h3>steam促销</h3>
                    <h5>更多 ></h5>
                </div>
                <div class="stxw">
                    <img src="./img/z_cfx/nr.png">
                    <h5>尼尔：机械纪元</h5>
                    <div class="hang1">
                        <div class="ybk">玩过相似</div>
                        <div class="ybk">女性主角</div>
                        <div class="ybk">动作</div>
                    </div>
                    <div class="hang2">
                        <div class="jg zuo">￥135</div>
                        <div class="jg zhong">￥274</div>
                        <div class="jg you">-51%</div>
                    </div>
                </div>
                <div class="stxw">
                    <img src="./img/z_cfx/dwyzx.jpg">
                    <h5>动物园之星</h5>
                    <div class="hang1">
                        <div class="ybk">管理</div>
                        <div class="ybk">模拟</div>
                        <div class="ybk">建造</div>
                    </div>
                    <div class="hang2">
                        <div class="jg zuo">￥44</div>
                        <div class="jg zhong">￥180</div>
                        <div class="jg you">-76%</div>
                    </div>
                </div>
                <div class="stxw">
                    <img src="./img/z_cfx/lsdj.jpg">
                    <h5>猎杀：对决</h5>
                    <div class="hang1">
                        <div class="ybk">西部</div>
                        <div class="ybk">多人</div>
                        <div class="ybk">设计</div>
                    </div>
                    <div class="hang2">
                        <div class="jg zuo">￥74</div>
                        <div class="jg zhong">￥149</div>
                        <div class="jg you">-50%</div>
                    </div>
                </div>
                <div class="stxw">
                    <img src="./img/z_cfx/qy.JPG">
                    <h5>缺氧</h5>
                    <div class="hang1">
                        <div class="ybk">基地建设</div>
                        <div class="ybk">资源管理</div>
                        <div class="ybk">生存</div>
                    </div>
                    <div class="hang2">
                        <div class="jg zuo">￥23</div>
                        <div class="jg zhong">￥58</div>
                        <div class="jg you">-61%</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="first">榜单</div>
    </div>




    <ul class="bnav">
        <a href="./index.html">
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xingzhuang-sanjiaoxing"></use>
            </svg>
            <p><a href="./index.html">首页</a></p>
        </li>
        </a>
        <a href="./sq.html">
            <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-yuanxingweixuanzhong"></use>
            </svg>
            <p><a href="./sq.html">社区</a></p>
        </li>
        </a>
        <a href="./yxk.html">
            <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-cha"></use>
            </svg>
            <p><a href="./yxk.html">游戏库</a></p>
        </li></a>
        <a href="./w.html">
            <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fangxingweixuanzhong"></use>
            </svg>
            <p><a href="./w.html">我</a></p>
        </li>
        </a>
    </ul>

    <script src="./swiper-7.2.0/swiper/swiper-bundle.min.js"></script>
    <script src="./yxk.js"></script>
</body>
</html>